<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item :label="$t('query.dateRange')">
                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
                    range-separator="-" :start-placeholder="$t('query.placeholder.dateRange.start')" :end-placeholder="$t('query.placeholder.dateRange.end')"
                    :default-time="['00:00:00', '23:59:59']"
                    @change="handleTimeChange"
                    ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('query.search')}}</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{$t('common.button.reset')}}</el-button>
            </el-form-item>
        </el-form>


        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" border :data="configList" @selection-change="handleSelectionChange">
            <el-table-column :label="$t('parameter.settings.userCode')" align="center" prop="userCode" />
            <el-table-column :label="$t('vehicle.vehicle.vehicleNike')" align="center" prop="vehicleNick" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.position.vehicleVinCode')" align="center" prop="vehicleVin" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.journey.startTime')" align="center" prop="startTime" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.journey.endTime')" align="center" prop="endTime" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.journey.mileage')" align="center" prop="mileage" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.journey.duration')" align="center" prop="driverTime" :show-overflow-tooltip="true" />
            <el-table-column :label="$t('vehicle.journey.trajectory')" align="center" >
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleView(scope.row)">{{$t("vehicle.journey.viewTrack")}}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

    </div>
</template>

<script>
import { listRidingDetailList } from "@/api/vehicle/riding/data";
import { getMapType } from "@/utils/auth";
export default {
    name: "inquiry",
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 参数表格数据
            configList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userCode: undefined,
                vehicleNike: undefined,
                vehicleVin: undefined,
                IMEI: undefined,
                startTime:undefined,
                endTime:undefined
            },
            routeParams:{
                startTime:undefined,
                endTime:undefined,
                deviveCode:"",
                mapType:undefined,
                travelId:""
            },
            // 表单参数
            form: {},
        }
    },
    created() {
        this.getList()
      },
      methods: {
        handleTimeChange(){
            console.log(this.dateRange != null);
            if (this.dateRange != null) {
                console.log(this.dateRange[0]);
                console.log(this.dateRange[1]);
                this.queryParams.startTime =this.dateRange[0] ;
                this.queryParams.endTime = this.dateRange[1];

            }else{
                this.queryParams.startTime =undefined ;
                this.queryParams.endTime = undefined;
                this.getList();
            }
                  
        },
        handleQuery(){
            this.getList();
        },
        resetQuery(){
            this.dateRange = undefined;
            this.getList();
        },
        handleExport(){},
        getList(){
            console.log(this.queryParams);
            listRidingDetailList(this.queryParams).then(res =>{
                if (res.code != 200) {
                    this.$message.error(this.$t("common.message.error"));
                }else{
                    this.$message.success(this.$t("common.message.success"))
                    this.configList = res.rows;
                    this.total = res.total;
                }
            })
        },
        handleView(row){
            console.log("设备编码",row.deviceCode);
            this.routeParams.startTime = row.startTime;
            this.routeParams.endTime = row.endTime;
            this.routeParams.deviveCode = row.deviceCode;
            console.log("地图类型",getMapType());
            this.routeParams.mapType = getMapType();
            this.routeParams.travelId = row.travelId;

            this.$router.push({path:"/journey",query: this.routeParams})
        },
        handleSelectionChange(){},
      },
}
</script>